<template>
  <div class="map-area">
    <van-popup v-model="showAreaPop" round position="bottom" class="area-pop">
      <div class="area" >
        <div class="area-title">
          <span class="area-title-btn" @click="showAreaPop = false">取消</span>
          <span class="area-title-con">地址选择</span>
          <span class="area-title-btn" @click="handleConfirm">确认</span>
        </div>
        <div class="area-wrap">
          <div class="area-wrap-item">
            <van-picker :columns="provinceList" @change="onProvinceChange" />
          </div>
          <div class="area-wrap-item">
            <van-picker :loading="loading" :columns="cityList" @change="onCityChange" />
          </div>
          <div class="area-wrap-item">
            <van-picker :loading="loadingArea" :columns="areaList" @change="onAreaChange" />
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2020年03月18日15:24:01
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2020年03月18日15:24:01
   */
  import Vue from 'vue'
  import { Picker } from 'vant'
  import { getProvince, getCity, getArea } from '@/api/login'
  Vue.use(Picker)
  export default Vue.extend({
    name: 'index',
    data() {
      return {
        showAreaPop: false,
        provinceList: [],
        cityList: [],
        areaList: [],
        loading: false,
        loadingArea: false,
        submitData: {
          province_id: null,
          city_id: null,
          area_id: null,
          province_name: '',
          city_name: '',
          area_name: ''
        },
        noArea: 0
      }
    },
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      showAreaPop(val) {
        this.$emit('update:visible', val)
      },
      visible(val) {
        this.showAreaPop = val
      }
    },
    methods: {
      /**
       * 选择省份
       */
      onProvinceChange(picker, value, index) {
        // // console.log(picker, value, index)
        this.loading = true
        this.submitData.province_id = value.province_id
        this.submitData.province_name = value.province_name
        this.cityList = []
        this.areaList = []
        this.getCityFn({ province_id: value.province_id })
      },
      /**
       * 选择城市
       */
      onCityChange(picker, value, index) {
        // // console.log(picker, value, index)
        this.loadingArea = true
        this.submitData.city_id = value.city_id
        this.submitData.city_name = value.city_name
        this.areaList = []
        this.submitData.area_id = ''
        this.submitData.area_name = ''
        this.getAreaFn({ city_id: value.city_id })
      },
      /**
       * 选择地区
       */
      onAreaChange(picker, value, index) {
        // // console.log(picker, value, index)
        this.submitData.area_id = value.area_id ? value.area_id : ''
        this.submitData.area_name = value.area_name ? value.area_name : ''
      },
      /**
       * 获取省份接口
       */
      getProvinceFn(data) {
        getProvince(data).then(res => {
          if (res.status == 1) {
            const resp = res.data
            resp.forEach(item => {
              item.text = item.province_name
            })
            const obj = { text: '选择省份' }
            resp.unshift(obj)
            this.provinceList = resp
          } else {
            this.$Error(res.msg)
          }
        })
      },
      /**
       * 获取城市接口
       */
      getCityFn(data) {
        getCity(data).then(res => {
          this.loading = false
          if (res.status == 1) {
            const resp = res.data
            resp.forEach(item => {
              item.text = item.city_name
            })
            const obj = { text: '选择城市' }
            resp.unshift(obj)
            this.cityList = resp
          } else {
            this.$Error(res.msg)
          }
        })
      },
      /**
       * 获取地区接口
       */
      getAreaFn(data) {
        getArea(data).then(res => {
          this.loadingArea = false
          if (res.status == 1) {
            const resp = res.data
            resp.forEach(item => {
              item.text = item.area_name
            })
  
            const obj = { text: '选择区域' }
            if (resp.length > 0) {
              this.noArea = 0
              resp.unshift(obj)
            } else {
              // 该市没有区
              this.noArea = 1
            }
            this.areaList = resp
          } else {
            this.$Error(res.msg)
          }
        })
      },
      /**
       * 确认按钮
       */
      handleConfirm() {
        const emitData = Object.assign({}, this.submitData, true)
        this.$emit('onSelect', emitData, this.noArea)
      }
    },
    created() {
      this.getProvinceFn()
    }
  })
</script>

<style lang="scss">
  .map-area{
    .area{
      &-title{
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        height: 88px;
        line-height: 88px;
        &-btn{
          padding: 0 32px;
          color: #F30C23;
          font-size: 28px;
          background-color: transparent;
          border: 0;
        }
        &-con{
          max-width: 50%;
          font-weight: 500;
          font-size: 32px;
          text-align: center;
        }
      }
      &-wrap{
        font-size: 0;
        &-item{
          width: percentage(1/3);
          display: inline-block;
          vertical-align: text-bottom;
        }
      }
    }
  }
</style>
